# Day10 Angular牙起來 - 程式面介紹繫結綁定4 雙向繫結

14th鐵人賽

gjlmotea

2022-09-25 23:57:13

2158 瀏覽

分享至

Day10 Angular牙起來 - 程式面介紹繫結綁定4 雙向繫結

再次回到角色區塊

我們在遊戲專案中，加入金錢元素

在 role.component.ts 加上 money 成員變數

...

export class RoleComponent implements OnInit {
  name = '初心冒險者';
  hp = 5;
  atk = 1;
  money = 0;

...

今天我想讓玩家自己能手動輸入自己擁有的錢

並修改 role.component.html

<h2>角色區塊</h2>
<div>名稱: {{name}}</div>
<div>血量: {{hp}}</div>
<div>攻擊力: {{atk}} <button (click)="addAtk()">點我增加攻擊力</button></div>
<div>金錢: {{money}} </div>
<input type="text" placeholder="自己的錢請自己輸入">

結果畫面

使用其他方式

這個功能可以純粹透過前面章節的事件繫結來達成
這邊使用(input)事件，當輸入框偵測到任何輸入都會觸發
同時要帶入$event 事件參數，$event 是詳細描述此次事件之各種數值的物件

有幾種Evnet方式可以玩看看

(input): 偵測任何輸入時觸發
(keyup): 離開鍵盤按鍵時觸發
(blur): 焦點（當前鼠標或鍵盤聚焦之處）離開輸入框時觸發
(change): 焦點離開輸入框、並且值被改變時才觸發

修改 role.component.html

<h2>角色區塊</h2>
<div>名稱: {{name}}</div>
<div>血量: {{hp}}</div>
<div>攻擊力: {{atk}} <button (click)="addAtk()">點我增加攻擊力</button></div>
<div>金錢: {{money}} </div>
<input type="text" placeholder="自己的錢請自己輸入" (input)="changeMoney1($event)" >

在 role.component.ts 中增加 changeMoney1、changeMoney2 方法
並且接收 event 事件參數

changeMoney1 可以換成 changeMoney2 試試看效果

修改 role.component.ts

...

export class RoleComponent implements OnInit {
...

  changeMoney1(event: any) {
    this.money = event.target.value;
  }

  changeMoney2(event: Event) {
    let value = (event.target as HTMLInputElement).value;
    this.money = Number(value);
  }

}

changeMoney1 是用Javascript的作法取得輸入框的欄位值，因為是any型別，Typescript不會對此做型別檢查
changeMoney2 作法是將Event事件，轉型成Typescript裡的物件類別HTMLInputElement再做取值，最後轉型成數字

完成畫面

不過，其實有更簡潔的方法可以達成這樣的功能

ngModel 雙向繫結

使用 [(ngModel)]="money" 也能得到相同效果
並且更加精簡，在ts程式碼完全不需要 changeMoney1、changeMoney2 方法

<h2>角色區塊</h2>
<div>名稱: {{name}}</div>
<div>血量: {{hp}}</div>
<div>攻擊力: {{atk}} <button (click)="addAtk()">點我增加攻擊力</button></div>
<div>金錢: {{money}} </div>
<input type="text" placeholder="自己的錢請自己輸入" [(ngModel)]="money" >

若使用到ngModel，要在Module模組底下 app.module.ts 新增 FormsModule

因為ngModel是隸屬於FormsModule模組下的套件，所以要import進來

為什麼ngModel隸屬在FormsModule底下？
因為輸入值基本上是使用<input>，而<input>元素通常會是表單元件的一部份

ngModel 背後原理

[(ngModel)]="money" 同時帶了屬性繫結[] 與事件繫結() 兩種方式
短短的 [(ngModel)]="money" 其實代表著以下這行

[ngModel]="money" (ngModelChange)="money = $event">

[ngModel]="money" 是屬性繫結[]，繫結對象綁定為money
(ngModelChange)="money = $event" 偵測到ngModel值發生變化時，事件會被觸發
- 觸發的事件為 money = $event
- 在此處的$event為ngModel的值，是字串。而非前面的$event是描述事件各項數值的物件